<template>
<!-- 主菜单列表 -->
  <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
      :default-active="onRoutes"
      :collapse="collapse"
      background-color="#20222A"
      text-color="rgba(255,255,255,.7)"
      active-text-color="#fff"
      router
    >
      <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
    </el-menu>
  </div>
</template>

<script>
// import bus from "../common/bus";
import {getSysmenu} from '../../api/api'
import {constantRoutes } from '@/router'
import {getMenu} from '../../api/user'
import SidebarItem from './SidebarItem'
export default {
  components: { SidebarItem},
  data() {
    return {
      permission_routes:[],
      collapse: false,
    };
  },
  methods: {
    
    getMenuData(menuName) {

      // 调用主菜单接口
      getMenu().then(res=>{
          if(res.code==1){
            this.permission_routes=res.data;
            this.$store.commit('dailog/editmenuList',res.data);
            // console.log(this.$store.state.dailog.menuList);
          }else{
              this.$message.error(res.message)
          }

      })
    }
  },
  computed: {
    onRoutes() {
      return this.$route.path.replace("/", "");
    }
  },
  created() {
    // bus.$on("collapse", msg => {
    //   this.collapse = msg;
    // });
    this.getMenuData();
  }
};
</script>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 250px;
}
.sidebar > ul {
  height: 100%;
}
</style>
